<template>
  <div>
    <ul class="lists" @click="show" ref="lists">
      <li v-for="(list, index) in lists" :key="index">
        <div class="question iconfont icon-xiala hairlines-bottom">
          {{list.question}}
        </div>
        <div class="answer" data-state="hide">
          <p>{{list.answer}}</p>
        </div>
      </li>
    </ul>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  export default {
    name: 'help',
    data () {
      return {
        title: '帮助中心',
        page: 1,
        lists: []
      }
    },
    methods: {
      getQuestion () {
        this.axios.get('/api/home/faqs?pages=' + this.page + '&type=1')
        .then((res) => {
          this.lists = res.data.desc
        })
      },
      back () {
        this.$router.go(-1)
      },
      show (event) {
        let target = event.target
        let originTarget = null
        let height = 0
        if (target.classList.contains('question')) {
          originTarget = target
          while (target) {
            target = target.nextSibling
            if (target.nodeType === 1) {
              if (target.getAttribute('data-state') === 'hide') {
                height = target.childNodes[0].offsetHeight
                target.style.height = height + 'px'
                target.setAttribute('data-state', 'show')
                originTarget.classList.remove('icon-xiala')
                originTarget.classList.add('icon-shangla')
              } else {
                target.style.height = 0 + 'px'
                target.setAttribute('data-state', 'hide')
                originTarget.classList.add('icon-xiala')
                originTarget.classList.remove('icon-shangla')
              }
              return
            }
          }
        }
      }
    },
    created () {
      this.setTitle(this.title)
      this.getQuestion()
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .lists{
    padding-bottom: rem(200);
    li{
      .question{
        display: flex;
        align-items: center;
        position: relative;
        background: #fff;
        padding: rem(25) rem(50) rem(25) rem(24);
        font-size: rem(28);
        color: #333;
      }
      .question:before{
        position: absolute;
        top: 0;
        right: rem(24);
        bottom: 0;
        color: #999;
        display: flex;
        align-items: center;
      }
      .answer{
        background: #f5f5f5;
        transition: all .4s;
        height: 0;
        overflow: hidden;
        font-size: rem(26);
        p{
          padding: rem(25) rem(24);
          color: #666;
          line-height: 150%;
        }
      }
      .show{
        height: auto;
      }
    }
  }
  footer{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    height: rem(100);
  }
</style>
